<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Google Maps Marker with Custom Link</title>
  <style>
    #map {
      height: 400px;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id="map"></div>

  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAwatcUW9bjz7eyKRg7UpgnT8x2-ChSDiM"></script>
  <script>
    function initMap() {
      const teHapua = { lat: -34.4331, lng: 172.8044 }; // Approximate coordinates for Te Hapua
      const map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: teHapua
      });

      const locations = [
        { lat: -34.4331, lng: 172.8044, label: "School", name: "Te Hapua School", type: "Full Primary School (Year 1-8)" },
        { lat: -34.4431, lng: 172.8144, label: "Library", name: "Te Hapua Library", type: "Public Library" },
        { lat: -34.4231, lng: 172.7944, label: "Park", name: "Te Hapua Park", type: "Public Park" },
        { lat: -34.4531, lng: 172.8244, label: "Shop", name: "Te Hapua General Store", type: "Convenience Store" }
      ];

      locations.forEach(location => {
        const marker = new google.maps.Marker({
          position: { lat: location.lat, lng: location.lng },
          map: map,
          label: {
            text: location.label,
            color: "white",
            fontSize: "14px",
            fontWeight: "bold"
          },
        });

        const infowindow = new google.maps.InfoWindow({
          content: `<div><h3>${location.name}</h3>` +
            `<p>${location.type}</p>` +
            '<a href="#">View details</a></div>'
        });

        marker.addListener('click', function () {
          infowindow.open(map, marker);
        });
      });
    }

    initMap();
  </script>
</body>

</html>